<template>
	<view>
		<text class="reg_eggshell" v-if="transform != 'translateY(0)'">hiahiahiahiahiahiahia</text>
	<view class="reg_container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
		
		<image class="reg_img" src="../../static/icon/icon.png" mode=""></image>
		

		<view class="reg_user_container" @click="clickUploadImg()">
			<image class="reg_user_img" :src="avatarUrl" mode="aspectFill"></image>
			<text class="reg_user_text">{{avatarText}}</text>
			<!-- <input class="reg_textarea" style="padding-left: 60rpx;" value="" placeholder="点击上传头像" /> -->
		</view>
		
		
		<input class="reg_textarea" value="" placeholder="请输入昵称" id="nick" @input="inputGet"/>
		<input class="reg_textarea" value="" placeholder="请输入邮箱" id="email" @input="inputGet"/>
		<input class="reg_textarea" value="" placeholder="请输入用户名" id="user" @input="inputGet"/>
		<input class="reg_textarea" value="" placeholder="请输入密码" id="password" type="password" @input="inputGet"/>
		<button class="reg_button" type="default" @click="clickRegister">注册</button>
		
	</view>
	</view>
</template>

<script>
	let pointY = 0;
	export default {
		data() {
			return {
				avatarUrl:"../../static/icon/default_user.png",
				transform:"translateY(0)",
				transition:"",
				avatarText:"点此上传头像",
				nick : "",
				email : "",
				user : "",
				password : "",
			}
		},
		computed:{
			bodyStyle:function(){
				return{
					"transform":this.transform,
					"transition":this.transition,
				}
			}
		},
		methods: {
			clickUploadImg(){
				let url = this.$params.host + this.$params.action_blogs_upload;
				uni.chooseImage({
					success:res =>{
						let filePath = res.tempFilePaths[0];
						uni.showLoading({
							title:"上传头像....",
							mask:false
						});
						this.$request.postFile(url,"file",filePath,{},res => {
							uni.hideLoading()
							console.log(res);
							this.avatarText = "上传成功!";
							let json = JSON.parse(res.data)
							if(json.success){
								this.avatarText = json.data;
								this.avatarUrl = this.$params.host + json.data;
							}
						})
					}
				})
			},
			inputGet(e){
				let id = e.currentTarget.id;
				this[`${id}`] = e.detail.value;
			},
			clickRegister(){
				if(!this.checkValid()){
					console.log("here");
					return;
				}
				
				if(this.nick.length == 0){
					this.nick = this.user;
				}
				let url = this.$params.host + this.$params.user_register;
				let data = {
					avatar:this.avatarText,
					email:this.email,
					nick_name:this.nick,
					password:this.password,
					user_name:this.user
				}
				this.$request.jsonParam(url,data,res=>{
					console.log(res);
					let app = getApp();
					app.globalData.uid = res.data.id;
					app.globalData.token = res.data.token;
					app.globalData.avatar = res.data.avatar;
					app.globalData.type = res.data.type;
					app.globalData.nickName = res.data.nickName;
					app.globalData.userName = res.data.userName;
					app.globalData.email = res.data.email;
				},()=>{
					this.$noti.post(this.$params.noti_login_status)
					uni.navigateBack()
					
				})
				
				
				
			},
			checkValid(){
				if(!this.$util.checkLength(this.password,6,"密码")){
					console.log("form");
					return false;
				}
				let reg_email = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
				if(!reg_email.test(this.email)){
					uni.showToast({
						title: '邮箱格式不对',
						icon:'error'
					});
					return false;
				}
				if(this.avatarUrl == "../../static/icon/default_user.png"){
					uni.showToast({
						title: '点击图片上传',
						icon:'error'
					});
					return false;
				}
				
				return true;
			},
			touchStart(e){
				pointY = e.touches[0].clientY;
			},
			touchMove(e){
				let distance = e.touches[0].clientY - pointY;
				if(distance > 150) distance = 150;
				if(distance < 50) return;
				this.transform = `translateY(${distance}rpx)`;
				this.transition = "";
			},
			touchEnd(e){
				this.transform = "translateY(0)";
				this.transition = "transform 8000ms linear";
			},
			
		}
	}
</script>

<style>
@import url("register.css");
</style>
